<template>
  <div class="container">
    <el-row :gutter="30">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="m-pane">
          <span class="title">我的收藏</span>
          <div class="li-show" v-for="item in favListData">
            <VueKeepRatio :ratio="1/1" width="100%">
              <img :src="item.img" class="list-li-img"/>
            </VueKeepRatio>
            <strong style="font-size: 16px;color:#0095ff;">￥{{item.price}}</strong>
            <p style="font-size: 14px;">{{item.name}}</p>
          </div>
        </div>
      </el-col>

      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="m-pane">
          <span class="title">我的购物车</span>
          <div class="li-show" v-for="item in shopListData">
            <VueKeepRatio :ratio="1/1" width="100%">
              <img :src="item.img" class="list-li-img"/>
            </VueKeepRatio>
            <strong style="font-size: 16px;color:#0095ff;">￥{{item.price}}</strong>
            <p style="font-size: 14px;">{{item.name}}</p>
          </div>
        </div>
      </el-col>

      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="m-pane">
          <span class="title">我的订单</span>
          <div class="li-show" v-for="item in orderListData">
            <VueKeepRatio :ratio="1/1" width="100%">
              <img :src="item.img" class="list-li-img"/>
            </VueKeepRatio>
            <strong style="font-size: 16px;color:#0095ff;">￥{{item.price}}</strong>
            <p style="font-size: 14px;">{{item.name}}</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
export default{
  data(){
    return{
      favListData: [{
        img: 'https://img-blog.csdnimg.cn/7ec94d94ea754803a665d65e25a1c2ca.png',
        name: '绝影CRC 紫色',
        price:'899.00'
      },{
        img: 'https://img-blog.csdnimg.cn/7ec94d94ea754803a665d65e25a1c2ca.png',
        name: '绝影CRC 紫色',
        price:'899.00'
      },{
        img: 'https://img-blog.csdnimg.cn/7ec94d94ea754803a665d65e25a1c2ca.png',
        name: '绝影CRC 紫色',
        price:'899.00'
      }],

      shopListData:[{
        img: 'https://img-blog.csdnimg.cn/0cfdd0d0344f47ef8ae9eae339a5c567.png',
        name: '彪马',
        price:'399.00'
      },{
        img: 'https://img-blog.csdnimg.cn/0cfdd0d0344f47ef8ae9eae339a5c567.png',
        name: '彪马',
        price:'399.00'
      },{
        img: 'https://img-blog.csdnimg.cn/0cfdd0d0344f47ef8ae9eae339a5c567.png',
        name: '彪马',
        price:'399.00'
      }],

      orderListData:[{
        img: 'https://img-blog.csdnimg.cn/141910b5005643f493fbe44428594f1b.png',
        name: '李宁 惟吾Pro',
        price:'499.00'
      },{
        img: 'https://img-blog.csdnimg.cn/141910b5005643f493fbe44428594f1b.png',
        name: '李宁 惟吾Pro',
        price:'499.00'
      },{
        img: 'https://img-blog.csdnimg.cn/141910b5005643f493fbe44428594f1b.png',
        name: '李宁 惟吾Pro',
        price:'499.00'
      }]
    }
  },
  methods:{

  },
  created(){
    axios.get('user/shoes/getAll')
    .then(res=>{
      var data=res.data;
      this.$data.orderListData=data[0];
      this.$data.favListData=data[1];
      this.$data.shopListData=data[2];
    })
    .catch(error=>{
      console.log(error);
    })
  }
}
</script>

<style lang="scss" scoped>

.container{
  display: flex;
  flex-direction: column;
  padding:30px;
  background-color: #f0f2f5;

  .m-pane{
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background-color: #fff;
    padding:20px;
    align-items: center;

    .title{
      text-align: center;
      font-weight: 600;
    }

    .li-show{
      display: flex;
      flex-direction: column;
      padding:20px;
      width:150px;
      height:216.4px;
      transition: margin .5s ease 0s;
      align-items: center;

      .list-li-img{
        width: 100%;
        height:auto;
        border-radius: .25rem;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
